<template>
    <div class="person">
      <h2>姓名：{{name}}</h2>
      <h2>年龄：{{age}}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">修改年龄</button>
      <button @click="showTel">查看联系方式</button>
    </div>
</template>

<script lang="ts" setup name="Person">
  let name = '张三'       // 此时的name不是响应式的
  let age = 18            // 此时的age不是响应式的
  let tel = 12345678901   // 此时的tel不是响应式的

  // 方法
  function changeName() {
    name = 'zhang-san'    // 注意：这样修改name，页面是没有变化的
    console.log(name)     // name确实改了，但name不是响应式的
  }

  function changeAge() {
    age += 1
  }

  function showTel() {
    alert(tel)
  }
</script>

<style scoped>
  .person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
  button {
    margin: 0 5px;
  }
</style>